
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Attribute: Attribute Based Speed Dating</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
    #speeddate h1 {
        font-size: 108%;
        color:#000;
        margin-bottom:2em;
    }

    #john {
        margin-bottom:10px;
    }

    .sd-nametag {
        border:1px solid #000;
        text-align:center;
        width:25em;
        margin:20px;
        
        background-color:#00f;

        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
                
        box-shadow: 3px 3px 3px #888;
        -moz-box-shadow: 3px 3px 3px #888;
        -webkit-box-shadow: 3px 3px 3px #888;
    }

    .sd-nametag .sd-hd, .sd-nametag .sd-ft {
        padding:5px;
        text-align:center;
        font-size:108%;
        font-weight:900;
        color:#fff;
    }

    .sd-nametag .sd-hd {    
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        -moz-border-radius-topright: 10px;
        -moz-border-radius-topleft: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-top-left-radius: 10px;
    }

    .sd-nametag .sd-ft {    
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
    }

    .sd-nametag .sd-bd {
        background-color:#fff;
        padding:1em;
    }

    .sd-nametag .sd-bd .sd-name, 
    .sd-nametag .sd-bd .sd-personality {
        font-size:108%;
        font-weight:900;
        font-family:monospace;
        text-decoration:underline;
        color:#00a;
    }

    .sd-nametag .sd-bd .sd-personality.sd-max {
        color:#f00;
    }

</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Attribute: Attribute Based Speed Dating</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Attribute: Attribute Based Speed Dating</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>
This example builds on the <a href="attribute-basic.html">"Basic Configuration" example</a>, 
showing how you can use attribute to model objects in your application.
</p>

<p>
As with the basic example, it is geared towards users who want to create their own classes from 
scratch and add attribute support. In most cases you should consider extending the 
<a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> class when you need attribute support, instead 
of augmenting Attribute directly. <a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> does the work described 
in this example for you, in addition to making it easier for users to extend you class.
</p>	</div>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="attribute-basic-speeddate_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="speeddate">

    <h1>Speed Dating With Attributes</h1>

    <div id="john">
        <button type="button" class="hi">Hi I'm John</button>
        <button type="button" class="taken" disabled="disabled">I like Jane</button>
        <div class="shirt"></div>
    </div>

    <div id="jane">
        <button type="button" disabled="disabled" class="hi">Hey, I'm Jane</button>
        <button type="button" class="upgrade" disabled="disabled">No way!, I save whales too!</button>
        <button type="button" class="taken" disabled="disabled">I like John</button>
        <div class="shirt"></div>
    </div>
</div>

<script type="text/javascript">

// Get a new instance of YUI and 
// load it with the required set of modules

YUI().use("node", "attribute", "substitute", function(Y) {

    // Setup custom class which we want to 
    // add managed attribute support to

    function SpeedDater(cfg) {

        // When constructed, setup the initial attributes for the
        // instance, by calling the addAttrs method.

        var attrs = {
            // Add 3 attributes: name, personality, available
            name : {
                writeOnce:true
            },
    
            personality : {
                value:50
            },
    
            available : {
                value:true
            }
        };

        this.addAttrs(attrs, cfg);
    }

    // Setup static property to hold attribute config

    SpeedDater.NAMETAG = '<div class="sd-nametag"><div class="sd-hd">Hello!</div><div class="sd-bd">I\'m <span class="sd-name">{name}</span> and my PersonalityQuotientIndex is <span class="sd-personality">{personality}</span></div><div class="sd-ft sd-availability">{available}</div></div>';

    SpeedDater.prototype.applyNameTag = function(where) {

        var tokens = {
            name: this.get("name"),
            available: (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken",
            personality: this.get("personality")
        };

        this.nameTag = Y.Node.create(Y.substitute(SpeedDater.NAMETAG, tokens));

        Y.one(where).appendChild(this.nameTag);
    };

    SpeedDater.prototype.updateNameTag = function() {

        var taken = (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken";
        var name = this.get("name");
        var personality = this.get("personality");

        this.nameTag.one(".sd-name").set("innerHTML", name);
        this.nameTag.one(".sd-availability").set("innerHTML", taken);

        var personalityEl = this.nameTag.one(".sd-personality"); 
        personalityEl.set("innerHTML", personality);

        if (personality > 90) {
            personalityEl.addClass("sd-max");
        }
    }

    // Augment custom class with Attribute
    Y.augment(SpeedDater, Y.Attribute);
    
    var john, jane;

    Y.on("click", function() {

        if (!john) {

            // Set both name and personality during construction 
            john = new SpeedDater({
                name: "John",
                personality: 76.43
            });
            john.applyNameTag("#john .shirt");

            Y.one("#jane .hi").set("disabled", false); 
        }

    }, "#john .hi");

    Y.on("click", function() {

        if (!jane) {

            // Set name during construction
            jane = new SpeedDater({
                name: "Jane"
            });

            // Set personality after construction
            jane.set("personality", 82);

            jane.applyNameTag("#jane .shirt");

            Y.all("#jane button").set("disabled", false);
            Y.all("#john button").set("disabled", false); 
        }

    }, "#jane .hi");

    Y.on("click", function() {

        john.set("available", false);
        john.updateNameTag();
        
    }, "#john .taken");

    Y.on("click", function() {

        jane.set("available", false);
        jane.updateNameTag();

    }, "#jane .taken");

    Y.on("click", function() {

        jane.set("personality", 98);
        jane.updateNameTag();

    }, "#jane .upgrade");

 });
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Setting Up a SpeedDater Class</h3>

<p>In this example, we'll create a custom <code>SpeedDater</code> class, and show how you can use attributes to manage the state for a Speed Dater.
In the <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a> we'll modify this example to leverage attribute change events.</p>

<h4>Creating A YUI Instance</h4>

<p>As with the other attribute <a href="attribute-basic.html">examples</a>, we'll setup our own instance of the YUI object and request the modules we require using the code pattern shown below:</p>

<div id="syntax-c481ee2224e65002a0d0eaab667fb09a" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>script type<span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Create our local YUI instance, to avoid</span></div></li><li class="li1"><div class="de1">    <span class="co1">// modifying the global YUI object</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>...<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;attribute&quot;</span><span class="sy0">,</span> <span class="st0">&quot;node&quot;</span><span class="sy0">,</span> ... <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">// Example code is written inside this function,</span></div></li><li class="li1"><div class="de1">        <span class="co1">// which gets passed our own YUI instance, Y, populated</span></div></li><li class="li2"><div class="de2">        <span class="co1">// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>script type<span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span><span class="sy0">&gt;</span>
&nbsp;
    <span class="co1">// Create our local YUI instance, to avoid</span>
    <span class="co1">// modifying the global YUI object</span>
&nbsp;
    YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>...<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;attribute&quot;</span><span class="sy0">,</span> <span class="st0">&quot;node&quot;</span><span class="sy0">,</span> ... <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
        <span class="co1">// Example code is written inside this function,</span>
        <span class="co1">// which gets passed our own YUI instance, Y, populated</span>
        <span class="co1">// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)</span>
&nbsp;
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span></pre></div><textarea id="syntax-c481ee2224e65002a0d0eaab667fb09a-plain"><script type="text/javascript">

    // Create our local YUI instance, to avoid
    // modifying the global YUI object

    YUI({...}).use("attribute", "node", ... function(Y) {

        // Example code is written inside this function,
        // which gets passed our own YUI instance, Y, populated
        // with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)

    });
</script></textarea></div>
<h4>Defining The SpeedDater Class</h4>

<p>The first step in the example is to create the constructor function for our new class, to which we want to add attribute support. In our example, this class is called <code>SpeedDater</code>.
We then augment <code>SpeedDater</code> with <code>Y.Attribute</code>, so that it receives all of <code>Attribute's</code> methods, in addition to any it may defined itself:</p>

<div id="syntax-dd324d53e541425364c665d63e57f9a2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Setup custom class which we want to add attribute support to</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> SpeedDater<span class="br0">&#40;</span>cfg<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ...</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Augment custom class with Attribute</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">augment</span><span class="br0">&#40;</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Setup custom class which we want to add attribute support to</span>
<span class="kw2">function</span> SpeedDater<span class="br0">&#40;</span>cfg<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    ...
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// Augment custom class with Attribute</span>
Y.<span class="me1">augment</span><span class="br0">&#40;</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-dd324d53e541425364c665d63e57f9a2-plain">// Setup custom class which we want to add attribute support to
function SpeedDater(cfg) {
    ...
}

// Augment custom class with Attribute
Y.augment(SpeedDater, Y.Attribute);</textarea></div>
<h4>Adding Attributes</h4>

<p>
We can now set up any attributes we need for <code>SpeedDater</code> using Attribute's <code>addAttrs()</code> method. 

For this example we add 3 attributes - <code>name</code>, <code>personality</code>, and <code>available</code>. 

We provide an default initial <code>value</code> for <code>personality</code> and <code>available</code>, but don't have anything for <code>name</code>.

As mentioned in the basic example, the same object literal we use to provide the initial value for the attribute can also be used to configure attribute properties such as <code>readOnly</code> or 
<code>writeOnce</code>, and to define <code>getter</code>, <code>setter</code> and <code>validator</code> methods for the attribute. For <code>name</code>, we configure it to be <code>writeOnce</code>, 
meaning that it's value can be set once by the user, but not modified after that single set.
</p>

<p>
The default set of attributes which <code>SpeedDater</code> will support is passed to <code>addAttrs</code> to set up the attributes for each instance during construction.
</p>

<p>
As mentioned previously, if you expect your class to be extended, <a href="http://developer.yahoo.com/yui/3/base/index.html">Base</a> provides a more convenient way for you to define the same attribute configuration statically for your class, so that it can be modified by extended classes. 
Base will take care of isolating the static configuration, so that it isn't modified across instances. 
</p>

The complete definition for <code>SpeedDater</code> is shown below:</p>

<div id="syntax-640b58083086b0d84f32c799f60c03f0" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Setup custom class which we want to </span></div></li><li class="li1"><div class="de1"><span class="co1">// add managed attribute support to</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> SpeedDater<span class="br0">&#40;</span>cfg<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// When constructed, setup the initial attributes for the</span></div></li><li class="li1"><div class="de1">    <span class="co1">// instance, by calling the addAttrs method.</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="co1">// Add 3 attributes: name, personality, available</span></div></li><li class="li1"><div class="de1">        <span class="kw3">name</span> <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            writeOnce<span class="sy0">:</span><span class="kw2">true</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        personality <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            value<span class="sy0">:</span><span class="nu0">50</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        available <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            value<span class="sy0">:</span><span class="kw2">true</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">&#40;</span>attrs<span class="sy0">,</span> cfg<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>where<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// Method used to render the visual representation of a </span></div></li><li class="li1"><div class="de1">    <span class="co1">// SpeedDater object's state (in this case as a name tag)</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// Method used to update the rendered state of SpeedDater in the DOM.</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Template to use form the markup    </span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">&quot;&lt;div class=&quot;</span>sd<span class="sy0">-</span>nametag<span class="st0">&quot;&gt;&lt;div class=&quot;</span>sd<span class="sy0">-</span>hd<span class="st0">&quot;&gt;Hello!&lt;/div&gt;... &lt;/div&gt;&quot;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Augment custom class with Attribute</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">augment</span><span class="br0">&#40;</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Setup custom class which we want to </span>
<span class="co1">// add managed attribute support to</span>
&nbsp;
<span class="kw2">function</span> SpeedDater<span class="br0">&#40;</span>cfg<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">// When constructed, setup the initial attributes for the</span>
    <span class="co1">// instance, by calling the addAttrs method.</span>
&nbsp;
    <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">&#123;</span>
        <span class="co1">// Add 3 attributes: name, personality, available</span>
        <span class="kw3">name</span> <span class="sy0">:</span> <span class="br0">&#123;</span>
            writeOnce<span class="sy0">:</span><span class="kw2">true</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
        personality <span class="sy0">:</span> <span class="br0">&#123;</span>
            value<span class="sy0">:</span><span class="nu0">50</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
        available <span class="sy0">:</span> <span class="br0">&#123;</span>
            value<span class="sy0">:</span><span class="kw2">true</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">&#40;</span>attrs<span class="sy0">,</span> cfg<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>where<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Method used to render the visual representation of a </span>
    <span class="co1">// SpeedDater object's state (in this case as a name tag)</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Method used to update the rendered state of SpeedDater in the DOM.</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// Template to use form the markup    </span>
SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">&quot;&lt;div class=&quot;</span>sd<span class="sy0">-</span>nametag<span class="st0">&quot;&gt;&lt;div class=&quot;</span>sd<span class="sy0">-</span>hd<span class="st0">&quot;&gt;Hello!&lt;/div&gt;... &lt;/div&gt;&quot;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Augment custom class with Attribute</span>
Y.<span class="me1">augment</span><span class="br0">&#40;</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-640b58083086b0d84f32c799f60c03f0-plain">// Setup custom class which we want to 
// add managed attribute support to

function SpeedDater(cfg) {

    // When constructed, setup the initial attributes for the
    // instance, by calling the addAttrs method.

    var attrs = {
        // Add 3 attributes: name, personality, available
        name : {
            writeOnce:true
        },

        personality : {
            value:50
        },

        available : {
            value:true
        }
    };

    this.addAttrs(attrs, cfg);
}

SpeedDater.prototype.applyNameTag = function(where) {
    // Method used to render the visual representation of a 
    // SpeedDater object's state (in this case as a name tag)
};

SpeedDater.prototype.updateNameTag = function() {
    // Method used to update the rendered state of SpeedDater in the DOM.
}

// Template to use form the markup    
SpeedDater.NAMETAG = "<div class="sd-nametag"><div class="sd-hd">Hello!</div>... </div>";

// Augment custom class with Attribute
Y.augment(SpeedDater, Y.Attribute);</textarea></div>
<p>
The <code>addAttrs()</code> method, in addition to the default attribute configuration, also accepts an object literal (associative array) of name/value pairs which can be 
used to over-ride the default initial values of the attributes. This is useful for classes which wish to allow the user the set the value of attributes as part of object 
construction, as shown by the use of the <code>cfg</code> argument above.
</p>

<h4>Using Attributes</h4>

<p>Now that we have <code>SpeedDater</code> defined with the set of attributes it supports, we can create multiple instances of <code>SpeedDater</code> defining the initial 
attribute state for each instance through the constructor. We can also update the instance's attribute state after construction, using the <code>get</code> and 
<code>set</code> methods defined by Attribute.</p>

<p>We create a first instance, <code>john</code>, setting up the intial state using Attribute's constructor configuration object support:</p>

<div id="syntax-1a0a4f38f1e96c0399248e828ae4b0f5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Set both name and personality during construction </span></div></li><li class="li1"><div class="de1">john <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">&quot;John&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    personality<span class="sy0">:</span> <span class="nu0">76.43</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Set both name and personality during construction </span>
john <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">&#40;</span><span class="br0">&#123;</span>
    <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">&quot;John&quot;</span><span class="sy0">,</span>
    personality<span class="sy0">:</span> <span class="nu0">76.43</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-1a0a4f38f1e96c0399248e828ae4b0f5-plain">// Set both name and personality during construction 
john = new SpeedDater({
    name: "John",
    personality: 76.43
});</textarea></div>
<p>For the second instance that we create, <code>jane</code>, we set the value of the personality attribute, after construction:</p>

<div id="syntax-3b69882730813b0faa41bd9f7a59b187" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Set name during construction</span></div></li><li class="li1"><div class="de1">jane <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">&quot;Jane&quot;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Set personality after construction. The initial value for personality </span></div></li><li class="li1"><div class="de1"><span class="co1">// in this case, will be the value defined when the attribute was added </span></div></li><li class="li1"><div class="de1"><span class="co1">// using addAttrs (above)</span></div></li><li class="li1"><div class="de1">jane.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="sy0">,</span> <span class="nu0">82</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Set name during construction</span>
jane <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">&#40;</span><span class="br0">&#123;</span>
    <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">&quot;Jane&quot;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Set personality after construction. The initial value for personality </span>
<span class="co1">// in this case, will be the value defined when the attribute was added </span>
<span class="co1">// using addAttrs (above)</span>
jane.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="sy0">,</span> <span class="nu0">82</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-3b69882730813b0faa41bd9f7a59b187-plain">// Set name during construction
jane = new SpeedDater({
    name: "Jane"
});

// Set personality after construction. The initial value for personality 
// in this case, will be the value defined when the attribute was added 
// using addAttrs (above)
jane.set("personality", 82);</textarea></div>
<p>We render the current attribute state of each instance to the DOM, using the <code>applyNameTag()</code> method defined on SpeedDater's prototype:</p>

<div id="syntax-c46b775e04926fef999f8fd75fd445a6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Render the sticker with john's state information to the DOM</span></div></li><li class="li1"><div class="de1">john.<span class="me1">applyNameTag</span><span class="br0">&#40;</span><span class="st0">&quot;#john .shirt&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Render the sticker with jane's state information to the DOM</span></div></li><li class="li2"><div class="de2">jane.<span class="me1">applySicker</span><span class="br0">&#40;</span><span class="st0">&quot;#jane .shirt&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Render the sticker with john's state information to the DOM</span>
john.<span class="me1">applyNameTag</span><span class="br0">&#40;</span><span class="st0">&quot;#john .shirt&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Render the sticker with jane's state information to the DOM</span>
jane.<span class="me1">applySicker</span><span class="br0">&#40;</span><span class="st0">&quot;#jane .shirt&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-c46b775e04926fef999f8fd75fd445a6-plain">// Render the sticker with john's state information to the DOM
john.applyNameTag("#john .shirt");

// Render the sticker with jane's state information to the DOM
jane.applySicker("#jane .shirt");</textarea></div>
<p>Although not directly related to working with Attributes, it's worth taking a look at the <code>applyNameTag()</code> and <code>updateNameTag()</code> implementations, since they establish
a commonly used pattern.</p>

<p>The <code>applyNameTag()</code> method handles rendering the initial visual representation for a speed dater object's state (in this case a name tag). It uses tokens in an HTML "template" string, which it replaces with the values 
of attributes using the <code>substitute()</code> utility method:</p>

<div id="syntax-ac81037e350501353f4144facd2cd864" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// A template for the markup representing the SpeedDater object..</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">'&lt;div class=&quot;sd-nametag&quot;&gt; <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0">                        &lt;div class=&quot;sd-hd&quot;&gt;Hello!&lt;/div&gt; <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0">                        &lt;div class=&quot;sd-bd&quot;&gt;I<span class="es0">\'</span>m &lt;span class=&quot;sd-name&quot;&gt;{name}&lt;/span&gt; <span class="es0">\ </span></span></div></li><li class="li2"><div class="de2"><span class="st0">                        and my PersonalityQuotientIndex is <span class="es0">\ </span></span></div></li><li class="li1"><div class="de1"><span class="st0">                        &lt;span class=&quot;sd-personality&quot;&gt;{personality}&lt;/span&gt; <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0">                        &lt;/div&gt; <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0">                        &lt;div class=&quot;sd-ft sd-availability&quot;&gt;{available}&lt;/div&gt; <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0">                     &lt;/div&gt;'</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// A template for the markup representing the SpeedDater object..</span>
SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">'&lt;div class=&quot;sd-nametag&quot;&gt; <span class="es0">\</span>
                        &lt;div class=&quot;sd-hd&quot;&gt;Hello!&lt;/div&gt; <span class="es0">\</span>
                        &lt;div class=&quot;sd-bd&quot;&gt;I<span class="es0">\'</span>m &lt;span class=&quot;sd-name&quot;&gt;{name}&lt;/span&gt; <span class="es0">\ </span>
                        and my PersonalityQuotientIndex is <span class="es0">\ </span>
                        &lt;span class=&quot;sd-personality&quot;&gt;{personality}&lt;/span&gt; <span class="es0">\</span>
                        &lt;/div&gt; <span class="es0">\</span>
                        &lt;div class=&quot;sd-ft sd-availability&quot;&gt;{available}&lt;/div&gt; <span class="es0">\</span>
                     &lt;/div&gt;'</span><span class="sy0">;</span></pre></div><textarea id="syntax-ac81037e350501353f4144facd2cd864-plain">// A template for the markup representing the SpeedDater object..
SpeedDater.NAMETAG = '<div class="sd-nametag"> \
                        <div class="sd-hd">Hello!</div> \
                        <div class="sd-bd">I\'m <span class="sd-name">{name}</span> \ 
                        and my PersonalityQuotientIndex is \ 
                        <span class="sd-personality">{personality}</span> \
                        </div> \
                        <div class="sd-ft sd-availability">{available}</div> \
                     </div>';</textarea></div>
<div id="syntax-acf709b71230e185cbcaf0bcfb9e65ba" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// A rendering method, used to create the initial markup for the SpeedDater.</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>where<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// This example uses an HTML template string containing placeholder </span></div></li><li class="li2"><div class="de2">    <span class="co1">// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the </span></div></li><li class="li1"><div class="de1">    <span class="co1">// tokens with the current attribute values.  </span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> tokens <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">// Get attribute values and map them to the tokens in the HTML template string</span></div></li><li class="li2"><div class="de2">        <span class="kw3">name</span><span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;name&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        available<span class="sy0">:</span> <span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">?</span> <span class="st0">&quot;I'm still looking &quot;</span> <span class="sy0">:</span> <span class="st0">&quot;Sorry, I'm taken&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        personality<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// Create a new Node element, from the token substituted string... </span></div></li><li class="li1"><div class="de1">    <span class="kw1">this</span>.<span class="me1">nameTag</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span>Y.<span class="me1">substitute</span><span class="br0">&#40;</span>SpeedDater.<span class="me1">NAMETAG</span><span class="sy0">,</span> tokens<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// ... and append it to the DOM</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">one</span><span class="br0">&#40;</span>where<span class="br0">&#41;</span>.<span class="me1">appendChild</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">nameTag</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// A rendering method, used to create the initial markup for the SpeedDater.</span>
SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>where<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">// This example uses an HTML template string containing placeholder </span>
    <span class="co1">// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the </span>
    <span class="co1">// tokens with the current attribute values.  </span>
&nbsp;
    <span class="kw2">var</span> tokens <span class="sy0">=</span> <span class="br0">&#123;</span>
        <span class="co1">// Get attribute values and map them to the tokens in the HTML template string</span>
        <span class="kw3">name</span><span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;name&quot;</span><span class="br0">&#41;</span><span class="sy0">,</span>
        available<span class="sy0">:</span> <span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">?</span> <span class="st0">&quot;I'm still looking &quot;</span> <span class="sy0">:</span> <span class="st0">&quot;Sorry, I'm taken&quot;</span><span class="sy0">,</span>
        personality<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="br0">&#41;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Create a new Node element, from the token substituted string... </span>
    <span class="kw1">this</span>.<span class="me1">nameTag</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span>Y.<span class="me1">substitute</span><span class="br0">&#40;</span>SpeedDater.<span class="me1">NAMETAG</span><span class="sy0">,</span> tokens<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// ... and append it to the DOM</span>
    Y.<span class="me1">one</span><span class="br0">&#40;</span>where<span class="br0">&#41;</span>.<span class="me1">appendChild</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">nameTag</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span></pre></div><textarea id="syntax-acf709b71230e185cbcaf0bcfb9e65ba-plain">// A rendering method, used to create the initial markup for the SpeedDater.
SpeedDater.prototype.applyNameTag = function(where) {

    // This example uses an HTML template string containing placeholder 
    // tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the 
    // tokens with the current attribute values.  

    var tokens = {
        // Get attribute values and map them to the tokens in the HTML template string
        name: this.get("name"),
        available: (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken",
        personality: this.get("personality")
    };

    // Create a new Node element, from the token substituted string... 
    this.nameTag = Y.Node.create(Y.substitute(SpeedDater.NAMETAG, tokens));

    // ... and append it to the DOM
    Y.one(where).appendChild(this.nameTag);
};</textarea></div>
<p>The <code>updateNameTag()</code> method handles updating this visual representation with the current state, when requested by the user</p>

<div id="syntax-c834801ee4a638614ee934e94286784e" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// An update method, used to refresh the rendered content, after </span></div></li><li class="li1"><div class="de1"><span class="co1">// an attribute value is changed.</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// Get current attribute values...</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> taken <span class="sy0">=</span> <span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">?</span> <span class="st0">&quot;I'm still looking &quot;</span> <span class="sy0">:</span> <span class="st0">&quot;Sorry, I'm taken&quot;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> <span class="kw3">name</span> <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;name&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> personality <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// Find the corresponding element, and replace the innerHTML with the new value</span></div></li><li class="li1"><div class="de1">    <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;.sd-name&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;innerHTML&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;.sd-availability&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;innerHTML&quot;</span><span class="sy0">,</span> taken<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> personalityEl <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;.sd-personality&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span> </div></li><li class="li2"><div class="de2">    personalityEl.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;innerHTML&quot;</span><span class="sy0">,</span> personality<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>personality <span class="sy0">&gt;</span> <span class="nu0">90</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        personalityEl.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">&quot;sd-max&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// An update method, used to refresh the rendered content, after </span>
<span class="co1">// an attribute value is changed.</span>
SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">// Get current attribute values...</span>
    <span class="kw2">var</span> taken <span class="sy0">=</span> <span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">?</span> <span class="st0">&quot;I'm still looking &quot;</span> <span class="sy0">:</span> <span class="st0">&quot;Sorry, I'm taken&quot;</span><span class="sy0">;</span>
    <span class="kw2">var</span> <span class="kw3">name</span> <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;name&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw2">var</span> personality <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Find the corresponding element, and replace the innerHTML with the new value</span>
    <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;.sd-name&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;innerHTML&quot;</span><span class="sy0">,</span> <span class="kw3">name</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;.sd-availability&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;innerHTML&quot;</span><span class="sy0">,</span> taken<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw2">var</span> personalityEl <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;.sd-personality&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span> 
    personalityEl.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;innerHTML&quot;</span><span class="sy0">,</span> personality<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>personality <span class="sy0">&gt;</span> <span class="nu0">90</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        personalityEl.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">&quot;sd-max&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-c834801ee4a638614ee934e94286784e-plain">// An update method, used to refresh the rendered content, after 
// an attribute value is changed.
SpeedDater.prototype.updateNameTag = function() {

    // Get current attribute values...
    var taken = (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken";
    var name = this.get("name");
    var personality = this.get("personality");

    // Find the corresponding element, and replace the innerHTML with the new value
    this.nameTag.one(".sd-name").set("innerHTML", name);
    this.nameTag.one(".sd-availability").set("innerHTML", taken);

    var personalityEl = this.nameTag.one(".sd-personality"); 
    personalityEl.set("innerHTML", personality);

    if (personality > 90) {
        personalityEl.addClass("sd-max");
    }
}</textarea></div>
<p>Each instance's state can be now be updated using Attribute's <code>set</code> method, and the subsequent call to SpeedDater's <code>updateNameTag()</code> method will update the visual representation (the rendered DOM) of the object:</p>

<div id="syntax-637d803ecc9f3242486d444c924e3bb6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    john.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    john.<span class="me1">updateNameTag</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#john .taken&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    jane.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    jane.<span class="me1">updateNameTag</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#jane .taken&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    jane.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="sy0">,</span> <span class="nu0">98</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    jane.<span class="me1">updateNameTag</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#jane .upgrade&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    john.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
    john.<span class="me1">updateNameTag</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#john .taken&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    jane.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;available&quot;</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
    jane.<span class="me1">updateNameTag</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#jane .taken&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    jane.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;personality&quot;</span><span class="sy0">,</span> <span class="nu0">98</span><span class="br0">&#41;</span><span class="sy0">;</span>
    jane.<span class="me1">updateNameTag</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#jane .upgrade&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-637d803ecc9f3242486d444c924e3bb6-plain">Y.on("click", function() {

    john.set("available", false);
    john.updateNameTag();
    
}, "#john .taken");

Y.on("click", function() {

    jane.set("available", false);
    jane.updateNameTag();

}, "#jane .taken");

Y.on("click", function() {

    jane.set("personality", 98);
    jane.updateNameTag();

}, "#jane .upgrade");</textarea></div>
<p>In the <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a>, we'll see how we can use Attribute change events to eliminate the need for users to call <code>updateNameTag()</code> each time they set an attribute, and have the two instances communicate with one another.</p>				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Attribute Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../attribute/attribute-basic.html'>Basic Attribute Configuration</a></li><li><a href='../attribute/attribute-rw.html'>Read-Only and Write-Once Attributes</a></li><li><a href='../attribute/attribute-event.html'>Attribute Change Events</a></li><li class='selected'><a href='../attribute/attribute-basic-speeddate.html'>Attribute Based Speed Dating</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Attribute Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_attribute.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="selected "><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
